<template>
	<view class="message-box">
		<view class="message">
			<text class="title">欢迎来到世界聊天室</text>
		</view>
		<view class="message_content" >
			<view v-for="item in messageList" class="user_box">
				<view v-if="item.type==1" :class="['user']">
					<view :class="[{'fr':item.nickName==userInfo.nickName},{'fl':item.nickName!=userInfo.nickName}]">
						<u-avatar :src="item.avatarUrl"></u-avatar>
						<view :class="['nickName',{'ml-20':item.nickName==userInfo.nickName}]">
						{{item.nickName==userInfo.nickName?'我':item.nickName}}
						<u-icon v-if="item.gender=='1'" class='man' name="man"></u-icon>
						<u-icon  v-if="item.gender=='2'" class='women' name="woman"></u-icon>
						</view>
					</view>
					<view :class="['msg',{'fr1':item.nickName==userInfo.nickName},{'fl1':item.nickName!=userInfo.nickName}]">
						<text>{{item.msg}}</text>
						
					</view>

				</view>
				<view v-else class="tip">
					<text>{{item.msg}}</text>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class='input'>
				<input type="text" v-model="msgText" />
			</view>
			<view class="button">
				<button @click="sendMessage">发送</button>
			</view>
		</view>
		<u-tabbar class='mb-20' value="2" @change='onChange' :list="list"></u-tabbar>
	</view>
</template>

<script>
	import io from '@hyoga/uni-socket.io';
	var socket = null;
	export default {
		data() {
			return {
				socket: "",
				msgText: "",
				messageList: [

				],
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						count: 2,
						isDot: true,
						customIcon: false,
					},
					{
						iconPath: "photo",
						selectedIconPath: "photo-fill",
						text: '放映厅',
						customIcon: false,
					},
					{
						iconPath: "chat",
						selectedIconPath: "chat-fill",
						text: '聊天',
						customIcon: false,
					},
					{
						iconPath: "play-right",
						selectedIconPath: "play-right-fill",
						text: '直播',
						customIcon: false,
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
						count: 23,
						isDot: false,
						customIcon: false,
					},
				],
				current: 2,
				socketIndex:0,
				userInfo: {

				}
			}
		},

		onShow() {
			let that = this;
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					// 获取用户信息
					uni.getUserInfo({
						provider: 'weixin',
						success: function(infoRes) {
							that.userInfo = infoRes.userInfo
							that.socket1()
						}
					});
				}
			});


		},
		onHide() {

			if (socket) {
				socket.close()
				socket = null
			} else {
				socket = null
			}
		},
		methods: {
			// 连接聊天服务器
			socket1() {
				let that = this
				socket = io('http://8.131.59.55:8080', {
					query: {},
					transports: ['websocket', 'polling'],
					timeout: 5000
				});

				socket.on('connect', () => {
					// ws连接已建立，此时可以进行socket.io的事件监听或者数据发送操作
					console.log('ws 已连接');
					// socket.io 唯一连接id，可以监控这个id实现点对点通讯
					const {
						id
					} = socket;

					socket.on('getMessage', (message) => {
						console.log(message, 'message')
						// 收到服务器推送的消息，可以跟进自身业务进行操作
						this.messageList.unshift(message)
					});
					if(that.socketIndex==0){
						// 主动向服务器发送数据
						socket.emit('sendMessage', {
							name: that.userInfo.nickName,
							msg: "欢迎 " + that.userInfo.nickName + "上线",
							avatarUrl: that.userInfo.avatarUrl,
							id: id,
							
							type: 2
						});
					}
					
					socket.on('disconnect', (msg) => {
						console.log("断开了")
						that.socketIndex+=1
						socket.close()
						that.socket1()
					});
				});
				// socket.on('disconnect', (msg) => {
				//   console.log('ws disconnect', msg);
				// });
			},

			// 发送消息
			sendMessage() {
				let that = this;
				const {
					id
				} = socket
				// let obj  =  {
				// 	nickName:that.userInfo.nickName,
				// 	msg:that.msgText,
				// 	avatarUrl:that.userInfo.avatarUrl,
				// 	type:1
				// }
				// // 主动向服务器发送数据
				// uni.sendSocketMessage({
				//     data: JSON.stringify(obj)
				//   });
				socket.emit('sendMessage', {
					nickName: that.userInfo.nickName,
					msg: that.msgText,
					avatarUrl: that.userInfo.avatarUrl,
					id: id,
					type: 1,
					gender:that.userInfo.gender,
				});
				this.msgText = ''
			},

			// 改变自定义tabbar
			onChange(e) {
				if (e == 0) {
					uni.switchTab({
						url: "/pages/index/index"
					})
					this.current = 2
				}
			},
			
			// 滚动
			onScroll(e){
				console.log(e)
			}
			
		}

	}
</script>

<style>
	.message {
		text-align: center;
	}

	.title {
		width: 100%;
		text-align: center;

		color: #2979ff;
		font-weight: bold;
	}

	.message_content {
		width: 100%;
		height: 400px;
		overflow-y: scroll;
		padding: 0 20px;
	}

	.fr1 {
		float: right;
	}

	.fr {
		position: relative;
		float: right;
		margin-right: 50px;
		padding-top: 25px;
		margin-left: 15px;

	}

	.user {
		width: 100%;
		min-height: 50px;
		position: relative;
		padding-top: 25px;
	}

	.ml-20 {
		margin-left: 15px;
	}

	.user_box {
		width: 100%;
		min-height: 50px;
		margin-top: 10px;
	}

	.nickName {
		position: absolute;
		top: 0;
		left: 2px;

	}

	.fl {
		padding-top: 15px;
		float: left;
		margin-right: 15px;
	}

	.fl1 {
		float: left;
	}

	.msg {
		min-height: 50px;
		line-height: 1;
		display: flex;
		align-items: center;
		background-color: skyblue;
		padding-left: 5px;
		padding-right: 5px;
		border-radius: 5px;
		color: white;
	}

	.footer {
		width: 100%;

		position: fixed;
		bottom: 100px;
		left: 0;
		display: flex;
		padding: 0 5%;
	}

	.input {
		width: 60%;

	}

	.input input {
		min-height: 45px !important;
		border-radius: 0;
		border: none;
		background-color: skyblue;
		border-radius: 15px 0 0 15px;
		padding-left: 20px;
	}

	.button {
		width: 30%;
		border: none;
	}

	button::after {
		border: none;
	}

	.button button {
		border: none !important;
		background-color: skyblue;
		height: 45px;
		color: white;
		border-radius: 0 15px 15px 0;
		box-sizing: none;

	}

	.tip {
		width: 50%;
		margin: 0 auto;
		text-align: center;


	}

	.tip text {
		padding: 3px 10px;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 10px;
		color: white;
	}
	.man{
		color: skyblue;
		margin-left: 2px;
	}
	.women{
		color: pink;
		margin-left: 2px;
	}
	.message-box{
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
</style>
